<template>
  <div id="app">
    <div class="menu-area">
      <el-menu :default-active="defaultActive" @select="changeMenu">
        <el-menu-item
          v-for="item in menus"
          :key="item.index"
          :index="item.index"
        >{{ item.label }}
        </el-menu-item>
      </el-menu>
    </div>
    <div class="main-content">
      <component :is="currentComponent" />
    </div>
  </div>
</template>

<script>
import VueOfficeDocx from '../office/VueOfficeDocx.vue'; // 导入组件
import VueOfficeExcel from '../office/VueOfficeExcel.vue';
import VueOfficePdf from '../office/VueOfficePdf.vue';
import JsPreviewDocx from '../office/JsPreviewDocx.vue';
import JsPreviewExcel from '../office/JsPreviewExcel.vue';
import JsPreviewPdf from '../office/JsPreviewPdf.vue';

export default {
  name: 'App',
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
    VueOfficePdf,
    JsPreviewDocx,
    JsPreviewExcel,
    JsPreviewPdf
  },
  data() {
    return {
      menus: [
        {
          label: 'docx预览（VueOfficeDocx）',
          index: 'VueOfficeDocx'
        },
        {
          label: 'excel预览（VueOfficeExcel）',
          index: 'VueOfficeExcel'
        },
        {
          label: 'pdf预览（VueOfficePdf）',
          index: 'VueOfficePdf'
        },
        {
          label: 'docx预览（纯js预览）',
          index: 'JsPreviewDocx'
        },
        {
          label: 'excel预览（纯js预览）',
          index: 'JsPreviewExcel'
        },
        {
          label: 'pdf预览（纯js预览）',
          index: 'JsPreviewPdf'
        }
      ],
      defaultActive: 'VueOfficeDocx', // 默认选中项
      currentComponent: 'VueOfficeDocx' // 默认展示的组件
    };
  },
  mounted() {
    let initialComponent = this.menus.find(menu => menu.index === this.defaultActive);
    this.currentComponent = initialComponent.index;
  },
  methods: {
    changeMenu(index) {
      this.currentComponent = index; // 更新当前显示的组件
    }
  }
};
</script>

<style>
* {
  margin: 0;
}

#app {
  display: flex;
}

.menu-area {
  width: 230px;
  height: 100vh;
}

.main-content {
  flex: 1;
  height: 100vh;
  overflow-y: auto;
}
</style>
